/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable react/jsx-pascal-case */
/* eslint-disable jsx-a11y/alt-text */
import React from 'react'

const Register = () => {
    // 实例化
    let navigate = React.$router.useNavigate()

    const [form] = React.$vant.Form.useForm()

    // 注册提交方法
    const onRegister = async (value) => {
        let data = {
            email: value.email,
            password: value.password
        }
        let result = await React.$api.register(data)
        if (result.code === 0) {
            React.$vant.Notify.show({
                type: 'warning',
                message: result.msg
            })
        }else{
            React.$vant.Notify.show({
                type: 'success',
                message: result.msg,
                onClose: () => {
                    navigate('/user/base/login')
                }
            })
        }
    }
    // 表单底部
    const Footer = () => {
        return (
            <>
                <div className="action">
                    <button className="btn" nativetype='submit'>注册</button>
                </div>
            </>
        )
    }
    // 创建验证规则
    const rules = {
        email: [
            {
                required: true,
                message: '请输入登录邮箱'
            },
            {
                message: '邮箱输入的格式有误',
                pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
            }
        ],
        password: [
            {
                required: true,
                message: '请输入密码'
            }
        ]
    }
    const flex={
        display: 'flex',
        justifyContent: 'flex-end',
        marginTop: '10px'
    }
    return (
        <>
            {/* <!-- 用户信息 --> */}
            <div className="user">
                <div className="avatar wow fadeInUp">
                    <img src="/assets/images/avatar.png" />
                </div>
            </div>

            <React.$vant.Form
                className="login wow fadeInUp"
                data-wow-delay="200ms"
                form={form}
                onFinish={onRegister}
                footer={<Footer />}
            >
                <React.$vant.Form.Item
                    rules={rules.email}
                    name='email'
                    label='邮箱'
                    labelWidth='30'
                >
                    <React.$vant.Input placeholder='请输入邮箱' />
                </React.$vant.Form.Item>

                <React.$vant.Form.Item
                    rules={rules.password}
                    name='password'
                    label='密码'
                    labelWidth='30'
                >
                    <React.$vant.Input type='password' placeholder='请输入密码' />
                </React.$vant.Form.Item>
                <React.$router.NavLink to='/user/base/login' style={flex}>已有账号，去登录</React.$router.NavLink>
            </React.$vant.Form>
        </>
    )
}

export default Register